<template>
	<view class="content">
		<uni-search-bar @confirm="search" @input="input" v-model="searchName" cancelButton="none"
			placeholder="输入菜谱名称进行搜索"></uni-search-bar>

		<view class="list" style="display: flex; justify-content: space-between; align-items: center;">
			<view style="font-size: 35rpx;">酸辣土豆丝</view>
			<view style="display: flex;">
				<button type="primary" size="mini" style="margin-right: 10rpx;" @click="see">查看</button>
				<button type="primary" size="mini" style="margin-right: 10rpx;" @click="see">修改</button>
				<button type="warn" size="mini" @click="del">删除</button>
			</view>
		</view>

		<view class="list" style="display: flex; justify-content: space-between; align-items: center;">
			<view style="font-size: 35rpx;">溜肉段</view>
			<view style="display: flex;">
				<button type="primary" size="mini" style="margin-right: 10rpx;" @click="see">查看</button>
				<button type="primary" size="mini" style="margin-right: 10rpx;" @click="see">修改</button>
				<button type="warn" size="mini" @click="del">删除</button>
			</view>
		</view>

		<view class="list" style="display: flex; justify-content: space-between; align-items: center;">
			<view style="font-size: 35rpx;">酸辣土豆丝</view>
			<view style="display: flex;">
				<button type="primary" size="mini" style="margin-right: 10rpx;" @click="see">查看</button>
				<button type="primary" size="mini" style="margin-right: 10rpx;" @click="see">修改</button>
				<button type="warn" size="mini" @click="del">删除</button>
			</view>
		</view>

		<uni-popup ref="popup" :mask-click="false">
			<view class="info">
				<!-- <view style="font-size: 35rpx;">菜谱信息</view>
				<view>酸辣土豆丝</view>
				<image src="../../static/images/tudousi.jpg"></image>
				<view style="text-align: left;">酸辣土豆丝，是用土豆、辣椒、白醋，葱等制作而成的菜肴，色泽光亮，酸辣可口。</view>
				<view class="tc-btn" style="display: flex; text-align: center; margin-top: 40rpx; border-top: solid 1rpx #eee; padding-top: 30rpx;">
					<view style="width: 50%;">关闭</view>
					<view style="width: 50%; color: #007AFF;">保存</view>
				</view> -->

				<uni-forms :modelValue="formData">
					<uni-forms-item label="菜谱名称" name="name">
						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入菜谱名称" />
					</uni-forms-item>
					<uni-forms-item label="选择分组">
						<view style="line-height: 38px;">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</uni-forms-item>
					<uni-forms-item label="上传图片">
						
					</uni-forms-item>
					<uni-forms-item label="介绍" name="info">
						<uni-easyinput type="textarea" v-model="formData.info" placeholder="请输入菜谱介绍" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submitForm">保存</button>
			</view>

		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['荤菜', '素菜'],
				index: 0,
				searchName: '',
				formData: {
					name: '酸辣土豆丝',
					img: '../../static/images/tudousi.jpg',
					info: '酸辣土豆丝，是用土豆、辣椒、白醋，葱等制作而成的菜肴，色泽光亮，酸辣可口。'
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
				}
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},

			submitForm() {
				uni.showToast({
					title: '修改成功',
					type: 'success',
					duration: 2000
				});
				this.$refs.popup.close();
			},
			see() {
				this.$refs.popup.open();
			},
			closeSee() {
				this.$refs.popup.close();
			},
			del() {
				uni.showModal({
					title: '提示',
					content: '确认删除此菜谱?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	.tc-btn-c {
		padding: 20rpx;
		display: flex;
		justify-content: center;
	}

	.content {
		padding: 30rpx;
		color: #333;
	}

	.list {
		background-color: #f8f8f8;
		padding: 40rpx 20rpx;
		margin: 30rpx 0;
	}

	.info {
		margin-left: 30rpx;
		margin-right: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 8rpx;
		text-align: center;
	}
</style>
